<template>
	<view class="my">
		<view class="myHeader">
			<view class="myHeader-left">
				<image :src="headerUrl" mode=""></image>
				<view>
					<view>{{userName}}</view>
					<view>{{tele}}</view>
				</view>
			</view>
			<view class="myHeader-right">
				<navigator url="../maintenancereport/message/message" hover-class="navigator-hover">
					<uni-badge class="uni-badge-left-margin" :text="value" absolute="rightTop" :offset="[2, 2]"
						size="small">
						<view class="iconfont icon-xiaoxi"><text class="box-text"></text></view>
					</uni-badge>
				</navigator>
			</view>
		</view>
		<view class="mycontent">
			<navigator url="../myHouse/myHouse" hover-class="navigator-hover">
				<view class="mycontent-box">
					<view class="mycontent-title">
						<view class="iconfont icon-fangwu"></view>
						<view>
							我的房屋
						</view>
					</view>
					<view class="mycontent-icon">
						<text class="iconfont icon-you"></text>
					</view>
				</view>
			</navigator>

			<navigator url="../myParkingLot/myParkingLot" hover-class="navigator-hover">
				<view class="mycontent-box">
					<view class="mycontent-title">
						<view class="iconfont icon-wodechewei"></view>
						<view>
							我的车位
						</view>
					</view>
					<view class="mycontent-icon">
						<text class="iconfont icon-you"></text>
					</view>
				</view>
			</navigator>

			<navigator url="../myCar/myCar" hover-class="navigator-hover">
				<view class="mycontent-box">
					<view class="mycontent-title">
						<view class="iconfont icon-wodecheliang"></view>
						<view>
							我的车辆
						</view>
					</view>
					<view class="mycontent-icon">
						<text class="iconfont icon-you"></text>
					</view>
				</view>
			</navigator>
			<navigator url="../myRent/myRent" hover-class="navigator-hover">
				<view class="mycontent-box">
					<view class="mycontent-title">
						<view class="iconfont icon-fangwuzulin"></view>
						<view>
							我的租房
						</view>
					</view>
					<view class="mycontent-icon">
						<text class="iconfont icon-you"></text>
					</view>
				</view>
			</navigator>
			<navigator url="../myCollection/myCollection" hover-class="navigator-hover">
				<view class="mycontent-box">
					<view class="mycontent-title">
						<view class="iconfont icon-shoucang"></view>
						<view>
							我的收藏
						</view>
					</view>
					<view class="mycontent-icon">
						<text class="iconfont icon-you"></text>
					</view>
				</view>
			</navigator>
			<navigator url="../Living/payRecord/payRecord" hover-class="navigator-hover">
				<view class="mycontent-box">
					<view class="mycontent-title">
						<view class="iconfont icon-jiaofei"></view>
						<view>
							缴费记录
						</view>
					</view>
					<view class="mycontent-icon">
						<text class="iconfont icon-you"></text>
					</view>
				</view>
			</navigator>
			<navigator url="../visitorsRecord/visitorsRecord" hover-class="navigator-hover">
				<view class="mycontent-box">
					<view class="mycontent-title">
						<view class="iconfont icon-fangke"></view>
						<view>
							访客记录
						</view>
					</view>
					<view class="mycontent-icon">
						<text class="iconfont icon-you"></text>
					</view>
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: '',
				tele: '',
				value: 0,
				headerUrl: '',
				customStyle: {
					backgroundColor: '#62ed0d',
					color: '#fff'
				}
			};
		},
		mounted() {
			const timer = setInterval(() => {
				if (this.value >= 199) {
					clearInterval(timer)
					return
				}
				this.value++
			}, 500)
		},
		onLoad() {
			try {
				const list = uni.getStorageSync('list');
				if (list) {
					console.log(list);
					this.userName = list.name
					this.tele = list.phoneNumber
					this.headerUrl = list.headPortrait
				}
			} catch (e) {
				// error
			}
		},
	}
</script>

<style lang="less" scoped>
	@import url('../../static/font/iconfont.css');

	page {
		height: 100%;
	}

	.my {
		height: 100%;

		.myHeader {
			height: 190rpx;
			background: #3478f7;
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: white;

			.myHeader-left {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 40rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
					margin-right: 30rpx;
				}
			}

			.myHeader-right {
				position: relative;
				margin-right: 40rpx;

				.iconfont {
					font-size: 60rpx;
				}

				.msgRecord {
					position: absolute;
					top: -5px;
					right: -5px;
					width: 30rpx;
					height: 30rpx;
					border-radius: 50%;
					background: #f16172;
					text-align: center;
					line-height: 30rpx;
					font-size: 20rpx;
				}
			}
		}

		.mycontent {
			margin: 20rpx auto;

			.mycontent-box {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 110rpx;
				border: 1px solid #eee;

				.mycontent-title {
					display: flex;
					margin-left: 40rpx;

					.data-v-650f983a {
						line-height: 60rpx;
					}

					.iconfont {
						font-size: 60rpx;
					}

					view {
						margin: 10rpx 0 0 20rpx;
					}
				}

				.mycontent-icon {
					margin-right: 20rpx;
				}

				image {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
				}
			}
		}
	}
</style>
